<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>农历生日提醒 - 功能原型</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        .phone-frame {
            width: 375px;
            height: 812px;
            border: 8px solid #1f2937;
            border-radius: 40px;
            overflow: hidden;
            position: relative;
            background: #000;
        }
        .phone-screen {
            width: 100%;
            height: 100%;
            background: #fff;
            overflow: hidden;
        }
        .status-bar {
            height: 44px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 20px;
            color: white;
            font-size: 14px;
            font-weight: 600;
        }
        .tab-bar {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 83px;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(20px);
            border-top: 1px solid #e5e7eb;
            display: flex;
            justify-content: space-around;
            align-items: center;
            padding-bottom: 20px;
        }
        .tab-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            color: #9ca3af;
            transition: all 0.3s;
        }
        .tab-item.active {
            color: #667eea;
        }
        .tab-item i {
            font-size: 24px;
        }
        .tab-item span {
            font-size: 10px;
        }
        .content-area {
            height: calc(100% - 44px - 83px);
            overflow-y: auto;
            background: #f8fafc;
        }
        .birthday-card {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 16px;
            padding: 20px;
            margin: 16px;
            color: white;
            position: relative;
            overflow: hidden;
        }
        .birthday-card::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -50%;
            width: 200px;
            height: 200px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
        }
        .floating-action {
            position: absolute;
            bottom: 100px;
            right: 20px;
            width: 56px;
            height: 56px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 24px;
            box-shadow: 0 8px 24px rgba(102, 126, 234, 0.4);
            cursor: pointer;
            transition: all 0.3s;
        }
        .floating-action:hover {
            transform: scale(1.1);
        }
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1000;
        }
        .modal-content {
            background: white;
            border-radius: 20px;
            padding: 24px;
            margin: 20px;
            max-width: 320px;
            width: 100%;
        }
        .form-group {
            margin-bottom: 16px;
        }
        .form-label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: #374151;
        }
        .form-input {
            width: 100%;
            padding: 12px 16px;
            border: 2px solid #e5e7eb;
            border-radius: 12px;
            font-size: 16px;
            transition: border-color 0.3s;
        }
        .form-input:focus {
            outline: none;
            border-color: #667eea;
        }
        .btn-primary {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 12px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            width: 100%;
        }
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(102, 126, 234, 0.4);
        }
        .btn-secondary {
            background: #f3f4f6;
            color: #374151;
            border: none;
            padding: 12px 24px;
            border-radius: 12px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            width: 100%;
        }
        .empty-state {
            text-align: center;
            padding: 60px 20px;
            color: #9ca3af;
        }
        .empty-state i {
            font-size: 64px;
            margin-bottom: 16px;
            opacity: 0.5;
        }
        .notification-item {
            background: white;
            border-radius: 12px;
            padding: 16px;
            margin: 8px 16px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            border-left: 4px solid #667eea;
        }
        .notification-time {
            font-size: 12px;
            color: #9ca3af;
            margin-top: 8px;
        }
        .switch {
            position: relative;
            display: inline-block;
            width: 50px;
            height: 28px;
        }
        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }
        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: .4s;
            border-radius: 28px;
        }
        .slider:before {
            position: absolute;
            content: "";
            height: 20px;
            width: 20px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            transition: .4s;
            border-radius: 50%;
        }
        input:checked + .slider {
            background-color: #667eea;
        }
        input:checked + .slider:before {
            transform: translateX(22px);
        }
    </style>
</head>
<body class="bg-gray-100 p-8">
    <div class="max-w-7xl mx-auto">
        <h1 class="text-3xl font-bold text-center mb-8 text-gray-800">农历生日提醒功能原型设计</h1>
        
        <!-- 原型界面展示区域 -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            
            <!-- 1. 主页面 - 生日提醒列表 -->
            <div class="phone-frame">
                <div class="phone-screen">
                    <div class="status-bar">
                        <span>9:41</span>
                        <span>万年历</span>
                        <span><i class="fas fa-battery-three-quarters"></i></span>
                    </div>
                    
                    <div class="content-area">
                        <div class="p-4">
                            <h2 class="text-xl font-bold text-gray-800 mb-4">农历生日提醒</h2>
                            
                            <!-- 生日卡片 -->
                            <div class="birthday-card">
                                <div class="flex justify-between items-start">
                                    <div>
                                        <h3 class="text-lg font-bold mb-2">妈妈生日</h3>
                                        <p class="text-sm opacity-90">农历三月初八</p>
                                        <p class="text-sm opacity-90">还有 15 天</p>
                                    </div>
                                    <div class="text-right">
                                        <div class="text-2xl mb-2">🎂</div>
                                        <div class="text-xs opacity-75">已开启提醒</div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="birthday-card" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
                                <div class="flex justify-between items-start">
                                    <div>
                                        <h3 class="text-lg font-bold mb-2">爸爸生日</h3>
                                        <p class="text-sm opacity-90">农历七月十五</p>
                                        <p class="text-sm opacity-90">还有 128 天</p>
                                    </div>
                                    <div class="text-right">
                                        <div class="text-2xl mb-2">🎉</div>
                                        <div class="text-xs opacity-75">已开启提醒</div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="birthday-card" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
                                <div class="flex justify-between items-start">
                                    <div>
                                        <h3 class="text-lg font-bold mb-2">爷爷生日</h3>
                                        <p class="text-sm opacity-90">农历腊月二十三</p>
                                        <p class="text-sm opacity-90">还有 45 天</p>
                                    </div>
                                    <div class="text-right">
                                        <div class="text-2xl mb-2">👴</div>
                                        <div class="text-xs opacity-75">已开启提醒</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 悬浮添加按钮 -->
                    <div class="floating-action">
                        <i class="fas fa-plus"></i>
                    </div>
                    
                    <!-- 底部导航栏 -->
                    <div class="tab-bar">
                        <div class="tab-item">
                            <i class="fas fa-calendar-alt"></i>
                            <span>万年历</span>
                        </div>
                        <div class="tab-item">
                            <i class="fas fa-bell"></i>
                            <span>提醒</span>
                        </div>
                        <div class="tab-item active">
                            <i class="fas fa-birthday-cake"></i>
                            <span>生日</span>
                        </div>
                        <div class="tab-item">
                            <i class="fas fa-user"></i>
                            <span>我的</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 2. 添加生日提醒页面 -->
            <div class="phone-frame">
                <div class="phone-screen">
                    <div class="status-bar">
                        <span>9:41</span>
                        <span>添加生日提醒</span>
                        <span><i class="fas fa-battery-three-quarters"></i></span>
                    </div>
                    
                    <div class="content-area">
                        <div class="p-4">
                            <div class="flex items-center mb-6">
                                <button class="mr-4 text-gray-600">
                                    <i class="fas fa-arrow-left text-xl"></i>
                                </button>
                                <h2 class="text-xl font-bold text-gray-800">添加生日提醒</h2>
                            </div>
                            
                            <div class="form-group">
                                <label class="form-label">姓名</label>
                                <input type="text" class="form-input" placeholder="请输入姓名" value="小明">
                            </div>
                            
                            <div class="form-group">
                                <label class="form-label">关系</label>
                                <select class="form-input">
                                    <option>朋友</option>
                                    <option>家人</option>
                                    <option>同事</option>
                                    <option>其他</option>
                                </select>
                            </div>
                            
                            <div class="form-group">
                                <label class="form-label">农历生日</label>
                                <div class="grid grid-cols-3 gap-2">
                                    <select class="form-input">
                                        <option>正月</option>
                                        <option>二月</option>
                                        <option>三月</option>
                                        <option>四月</option>
                                        <option>五月</option>
                                        <option>六月</option>
                                        <option>七月</option>
                                        <option>八月</option>
                                        <option>九月</option>
                                        <option>十月</option>
                                        <option>冬月</option>
                                        <option>腊月</option>
                                    </select>
                                    <select class="form-input">
                                        <option>初一</option>
                                        <option>初二</option>
                                        <option>初三</option>
                                        <option>初四</option>
                                        <option>初五</option>
                                        <option>初六</option>
                                        <option>初七</option>
                                        <option>初八</option>
                                        <option>初九</option>
                                        <option>初十</option>
                                        <option>十一</option>
                                        <option>十二</option>
                                        <option>十三</option>
                                        <option>十四</option>
                                        <option>十五</option>
                                        <option>十六</option>
                                        <option>十七</option>
                                        <option>十八</option>
                                        <option>十九</option>
                                        <option>二十</option>
                                        <option>廿一</option>
                                        <option>廿二</option>
                                        <option>廿三</option>
                                        <option>廿四</option>
                                        <option>廿五</option>
                                        <option>廿六</option>
                                        <option>廿七</option>
                                        <option>廿八</option>
                                        <option>廿九</option>
                                        <option>三十</option>
                                    </select>
                                    <input type="number" class="form-input" placeholder="年" value="1990">
                                </div>
                            </div>
                            
                            <div class="form-group">
                                <label class="form-label">提醒设置</label>
                                <div class="space-y-3">
                                    <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                                        <div>
                                            <div class="font-medium">生日当天</div>
                                            <div class="text-sm text-gray-500">00:00 提醒</div>
                                        </div>
                                        <label class="switch">
                                            <input type="checkbox" checked>
                                            <span class="slider"></span>
                                        </label>
                                    </div>
                                    <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                                        <div>
                                            <div class="font-medium">提前一天</div>
                                            <div class="text-sm text-gray-500">20:00 提醒</div>
                                        </div>
                                        <label class="switch">
                                            <input type="checkbox" checked>
                                            <span class="slider"></span>
                                        </label>
                                    </div>
                                    <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                                        <div>
                                            <div class="font-medium">提前一周</div>
                                            <div class="text-sm text-gray-500">20:00 提醒</div>
                                        </div>
                                        <label class="switch">
                                            <input type="checkbox">
                                            <span class="slider"></span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="form-group">
                                <label class="form-label">备注</label>
                                <textarea class="form-input" rows="3" placeholder="添加备注信息（可选）"></textarea>
                            </div>
                            
                            <div class="space-y-3 mt-8">
                                <button class="btn-primary">保存提醒</button>
                                <button class="btn-secondary">取消</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 3. 生日详情页面 -->
            <div class="phone-frame">
                <div class="phone-screen">
                    <div class="status-bar">
                        <span>9:41</span>
                        <span>生日详情</span>
                        <span><i class="fas fa-battery-three-quarters"></i></span>
                    </div>
                    
                    <div class="content-area">
                        <div class="p-4">
                            <div class="flex items-center justify-between mb-6">
                                <button class="text-gray-600">
                                    <i class="fas fa-arrow-left text-xl"></i>
                                </button>
                                <h2 class="text-xl font-bold text-gray-800">生日详情</h2>
                                <button class="text-blue-600">
                                    <i class="fas fa-edit text-xl"></i>
                                </button>
                            </div>
                            
                            <!-- 生日信息卡片 -->
                            <div class="birthday-card mb-6">
                                <div class="text-center">
                                    <div class="text-4xl mb-4">🎂</div>
                                    <h3 class="text-2xl font-bold mb-2">妈妈生日</h3>
                                    <p class="text-lg opacity-90 mb-4">农历三月初八</p>
                                    <div class="bg-white bg-opacity-20 rounded-lg p-3">
                                        <div class="text-sm opacity-90">距离生日还有</div>
                                        <div class="text-2xl font-bold">15 天</div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 详细信息 -->
                            <div class="bg-white rounded-lg p-4 mb-4">
                                <h4 class="font-bold text-gray-800 mb-3">基本信息</h4>
                                <div class="space-y-3">
                                    <div class="flex justify-between">
                                        <span class="text-gray-600">姓名</span>
                                        <span class="font-medium">妈妈</span>
                                    </div>
                                    <div class="flex justify-between">
                                        <span class="text-gray-600">关系</span>
                                        <span class="font-medium">家人</span>
                                    </div>
                                    <div class="flex justify-between">
                                        <span class="text-gray-600">农历生日</span>
                                        <span class="font-medium">三月初八</span>
                                    </div>
                                    <div class="flex justify-between">
                                        <span class="text-gray-600">公历生日</span>
                                        <span class="font-medium">2024年4月16日</span>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 提醒设置 -->
                            <div class="bg-white rounded-lg p-4 mb-4">
                                <h4 class="font-bold text-gray-800 mb-3">提醒设置</h4>
                                <div class="space-y-3">
                                    <div class="flex items-center justify-between">
                                        <div>
                                            <div class="font-medium">生日当天</div>
                                            <div class="text-sm text-gray-500">00:00 提醒</div>
                                        </div>
                                        <label class="switch">
                                            <input type="checkbox" checked>
                                            <span class="slider"></span>
                                        </label>
                                    </div>
                                    <div class="flex items-center justify-between">
                                        <div>
                                            <div class="font-medium">提前一天</div>
                                            <div class="text-sm text-gray-500">20:00 提醒</div>
                                        </div>
                                        <label class="switch">
                                            <input type="checkbox" checked>
                                            <span class="slider"></span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 操作按钮 -->
                            <div class="space-y-3">
                                <button class="btn-secondary" style="background: #fee2e2; color: #dc2626;">
                                    <i class="fas fa-trash mr-2"></i>删除提醒
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 4. 空状态页面 -->
            <div class="phone-frame">
                <div class="phone-screen">
                    <div class="status-bar">
                        <span>9:41</span>
                        <span>生日提醒</span>
                        <span><i class="fas fa-battery-three-quarters"></i></span>
                    </div>
                    
                    <div class="content-area">
                        <div class="empty-state">
                            <i class="fas fa-birthday-cake"></i>
                            <h3 class="text-xl font-bold mb-2 text-gray-600">还没有生日提醒</h3>
                            <p class="text-gray-500 mb-8">添加亲朋好友的农历生日，不错过每一个重要时刻</p>
                            <button class="btn-primary">
                                <i class="fas fa-plus mr-2"></i>添加第一个生日提醒
                            </button>
                        </div>
                    </div>
                    
                    <!-- 悬浮添加按钮 -->
                    <div class="floating-action">
                        <i class="fas fa-plus"></i>
                    </div>
                    
                    <!-- 底部导航栏 -->
                    <div class="tab-bar">
                        <div class="tab-item">
                            <i class="fas fa-calendar-alt"></i>
                            <span>万年历</span>
                        </div>
                        <div class="tab-item">
                            <i class="fas fa-bell"></i>
                            <span>提醒</span>
                        </div>
                        <div class="tab-item active">
                            <i class="fas fa-birthday-cake"></i>
                            <span>生日</span>
                        </div>
                        <div class="tab-item">
                            <i class="fas fa-user"></i>
                            <span>我的</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 5. 通知提醒页面 -->
            <div class="phone-frame">
                <div class="phone-screen">
                    <div class="status-bar">
                        <span>9:41</span>
                        <span>生日提醒</span>
                        <span><i class="fas fa-battery-three-quarters"></i></span>
                    </div>
                    
                    <div class="content-area">
                        <div class="p-4">
                            <h2 class="text-xl font-bold text-gray-800 mb-4">生日提醒</h2>
                            
                            <!-- 通知列表 -->
                            <div class="notification-item">
                                <div class="flex items-start justify-between">
                                    <div class="flex-1">
                                        <h4 class="font-bold text-gray-800">妈妈生日提醒</h4>
                                        <p class="text-gray-600 text-sm mt-1">明天就是妈妈的农历生日了，记得送上祝福哦！</p>
                                        <div class="notification-time">今天 20:00</div>
                                    </div>
                                    <div class="ml-3">
                                        <i class="fas fa-bell text-blue-500 text-xl"></i>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="notification-item">
                                <div class="flex items-start justify-between">
                                    <div class="flex-1">
                                        <h4 class="font-bold text-gray-800">爸爸生日提醒</h4>
                                        <p class="text-gray-600 text-sm mt-1">爸爸的农历生日还有一周，可以准备礼物了</p>
                                        <div class="notification-time">昨天 20:00</div>
                                    </div>
                                    <div class="ml-3">
                                        <i class="fas fa-bell text-blue-500 text-xl"></i>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="notification-item">
                                <div class="flex items-start justify-between">
                                    <div class="flex-1">
                                        <h4 class="font-bold text-gray-800">爷爷生日提醒</h4>
                                        <p class="text-gray-600 text-sm mt-1">爷爷的农历生日还有45天</p>
                                        <div class="notification-time">3天前</div>
                                    </div>
                                    <div class="ml-3">
                                        <i class="fas fa-bell text-gray-400 text-xl"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 底部导航栏 -->
                    <div class="tab-bar">
                        <div class="tab-item">
                            <i class="fas fa-calendar-alt"></i>
                            <span>万年历</span>
                        </div>
                        <div class="tab-item active">
                            <i class="fas fa-bell"></i>
                            <span>提醒</span>
                        </div>
                        <div class="tab-item">
                            <i class="fas fa-birthday-cake"></i>
                            <span>生日</span>
                        </div>
                        <div class="tab-item">
                            <i class="fas fa-user"></i>
                            <span>我的</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 6. 设置页面 -->
            <div class="phone-frame">
                <div class="phone-screen">
                    <div class="status-bar">
                        <span>9:41</span>
                        <span>生日提醒设置</span>
                        <span><i class="fas fa-battery-three-quarters"></i></span>
                    </div>
                    
                    <div class="content-area">
                        <div class="p-4">
                            <div class="flex items-center mb-6">
                                <button class="mr-4 text-gray-600">
                                    <i class="fas fa-arrow-left text-xl"></i>
                                </button>
                                <h2 class="text-xl font-bold text-gray-800">生日提醒设置</h2>
                            </div>
                            
                            <!-- 全局设置 -->
                            <div class="bg-white rounded-lg p-4 mb-4">
                                <h4 class="font-bold text-gray-800 mb-3">提醒设置</h4>
                                <div class="space-y-4">
                                    <div class="flex items-center justify-between">
                                        <div>
                                            <div class="font-medium">开启生日提醒</div>
                                            <div class="text-sm text-gray-500">接收所有生日提醒通知</div>
                                        </div>
                                        <label class="switch">
                                            <input type="checkbox" checked>
                                            <span class="slider"></span>
                                        </label>
                                    </div>
                                    <div class="flex items-center justify-between">
                                        <div>
                                            <div class="font-medium">声音提醒</div>
                                            <div class="text-sm text-gray-500">播放提醒音效</div>
                                        </div>
                                        <label class="switch">
                                            <input type="checkbox" checked>
                                            <span class="slider"></span>
                                        </label>
                                    </div>
                                    <div class="flex items-center justify-between">
                                        <div>
                                            <div class="font-medium">震动提醒</div>
                                            <div class="text-sm text-gray-500">提醒时震动</div>
                                        </div>
                                        <label class="switch">
                                            <input type="checkbox">
                                            <span class="slider"></span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 默认提醒时间 -->
                            <div class="bg-white rounded-lg p-4 mb-4">
                                <h4 class="font-bold text-gray-800 mb-3">默认提醒时间</h4>
                                <div class="space-y-3">
                                    <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                                        <div>
                                            <div class="font-medium">生日当天</div>
                                            <div class="text-sm text-gray-500">00:00</div>
                                        </div>
                                        <i class="fas fa-chevron-right text-gray-400"></i>
                                    </div>
                                    <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                                        <div>
                                            <div class="font-medium">提前一天</div>
                                            <div class="text-sm text-gray-500">20:00</div>
                                        </div>
                                        <i class="fas fa-chevron-right text-gray-400"></i>
                                    </div>
                                    <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                                        <div>
                                            <div class="font-medium">提前一周</div>
                                            <div class="text-sm text-gray-500">20:00</div>
                                        </div>
                                        <i class="fas fa-chevron-right text-gray-400"></i>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 数据管理 -->
                            <div class="bg-white rounded-lg p-4 mb-4">
                                <h4 class="font-bold text-gray-800 mb-3">数据管理</h4>
                                <div class="space-y-3">
                                    <button class="w-full text-left p-3 bg-gray-50 rounded-lg">
                                        <div class="font-medium text-blue-600">导出生日数据</div>
                                        <div class="text-sm text-gray-500">备份所有生日提醒信息</div>
                                    </button>
                                    <button class="w-full text-left p-3 bg-gray-50 rounded-lg">
                                        <div class="font-medium text-blue-600">导入生日数据</div>
                                        <div class="text-sm text-gray-500">从备份文件恢复数据</div>
                                    </button>
                                    <button class="w-full text-left p-3 bg-gray-50 rounded-lg">
                                        <div class="font-medium text-red-600">清空所有数据</div>
                                        <div class="text-sm text-gray-500">删除所有生日提醒</div>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 功能说明 -->
        <div class="mt-12 bg-white rounded-lg p-6 shadow-lg">
            <h2 class="text-2xl font-bold text-gray-800 mb-6">功能设计说明</h2>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                <div>
                    <h3 class="text-xl font-bold text-gray-800 mb-4">用户需求分析</h3>
                    <ul class="space-y-2 text-gray-600">
                        <li class="flex items-start">
                            <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
                            <span>记录亲朋好友的农历生日信息</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
                            <span>设置多种提醒时间（当天、提前一天、提前一周）</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
                            <span>查看距离生日的倒计时</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
                            <span>接收推送通知提醒</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
                            <span>管理生日提醒的开启/关闭</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
                            <span>数据备份和恢复功能</span>
                        </li>
                    </ul>
                </div>
                
                <div>
                    <h3 class="text-xl font-bold text-gray-800 mb-4">产品功能规划</h3>
                    <ul class="space-y-2 text-gray-600">
                        <li class="flex items-start">
                            <i class="fas fa-star text-yellow-500 mt-1 mr-2"></i>
                            <span>生日列表展示（主页面）</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-star text-yellow-500 mt-1 mr-2"></i>
                            <span>添加/编辑生日提醒</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-star text-yellow-500 mt-1 mr-2"></i>
                            <span>生日详情查看</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-star text-yellow-500 mt-1 mr-2"></i>
                            <span>通知提醒管理</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-star text-yellow-500 mt-1 mr-2"></i>
                            <span>全局设置配置</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-star text-yellow-500 mt-1 mr-2"></i>
                            <span>数据导入导出</span>
                        </li>
                    </ul>
                </div>
            </div>
            
            <div class="mt-8">
                <h3 class="text-xl font-bold text-gray-800 mb-4">UI/UX 设计特点</h3>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <div class="bg-gradient-to-br from-blue-50 to-purple-50 p-4 rounded-lg">
                        <h4 class="font-bold text-gray-800 mb-2">视觉设计</h4>
                        <ul class="text-sm text-gray-600 space-y-1">
                            <li>• 渐变色彩搭配，营造温馨氛围</li>
                            <li>• 卡片式布局，信息层次清晰</li>
                            <li>• 图标丰富，提升视觉体验</li>
                            <li>• 符合iOS设计规范</li>
                        </ul>
                    </div>
                    <div class="bg-gradient-to-br from-green-50 to-blue-50 p-4 rounded-lg">
                        <h4 class="font-bold text-gray-800 mb-2">交互设计</h4>
                        <ul class="text-sm text-gray-600 space-y-1">
                            <li>• 悬浮按钮快速添加</li>
                            <li>• 滑动开关控制提醒</li>
                            <li>• 手势操作友好</li>
                            <li>• 反馈及时明确</li>
                        </ul>
                    </div>
                    <div class="bg-gradient-to-br from-orange-50 to-red-50 p-4 rounded-lg">
                        <h4 class="font-bold text-gray-800 mb-2">用户体验</h4>
                        <ul class="text-sm text-gray-600 space-y-1">
                            <li>• 操作流程简单直观</li>
                            <li>• 空状态引导用户</li>
                            <li>• 个性化提醒设置</li>
                            <li>• 数据安全保护</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html> 